<template>
  <div class="app-container">
    <search @seach="seach"></search>
    <div class="table-box">
      <a href="javascript:;" class="exportdocument" @click="openadd"><i class="el-icon-circle-plus"></i>添加</a>
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle" :operationtype="operationtype" v-on:delet="delet" ></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
    <Modal  :show.sync="show" v-on:close="close" v-on:submit="submit" />
  </div>
</template>

<script>
  import { queryTrackUser } from '@/api/list'
  import search from  './search'
  import Pagations from '@/components/pagations'
  import pagationdata from '@/mixins/pagations'
  import Modal from './modal'
  import { addTrackUser ,updateTrackUser} from '@/api/request'
  import Tables from  '@/components/table'
  import Option from '@/components/table/option'

  export default {
    mixins: [pagationdata],
    name:'OverSpeed',
    data() {
      return {
        show:false,
        operationtype:4,
        tableTitle:[{
          title:'姓名',
          prop:'userName'
        },{
          title:'手机号',
          prop:'telephone'
        },{
            prop: "",
            title: "操作",
            width:'120px',
            render: (h, param) => {
              const optionData = {
                title: "操作",
                items: [
                  { label: "删除", func: { func: "delet", uuid: param.row },id:1 }]
              };

              return h(Option, {
                props: { optionData: optionData },
                on: { delet: this.delet}
              });
            }
          }]
      }
    },
    components:{
      search,
      Pagations,
      Modal,
      Tables
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      seach(data){
        this.formline=data
        this.fetchData(data)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        queryTrackUser(data).then(response => {
          if(response && response.body){
            this.list = response.body.trackUserList
            this.totalCount = response.body.count
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      },
      openadd(){
        this.show=true
      },
      close(formName) {
        this.show = false
        formName.resetFields()
      },
      submit({ formName, formInline }) {
        let that = this
        formName.validate((valid) => {
          if (valid) {
            this.show = false
            this.formline={}
            addTrackUser({...formInline}).then(response => {
              that.fetchData(this.listQuery)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      delet(row){
        this.$confirm('确定删除该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateTrackUser({userId:row.userId}).then(response => {
            this.formline={}
            this.fetchData(this.listQuery)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除用户'
          })
        })
      }
    }
  }
</script>
